@import 'function.scss';
$borderColor:#e1e1e1;
$mainColor:#EB6859;
$mainColor2:#333;
$colorGray:#ddd;
$colorGray2:#666;
$colorGray3:#999;
$colorGray4:#f2f2f2;
$colorGray5:#c2c2c2;
$colorWhite:#fff;

$colorError:#FF5400;

$font12:12px;
$font13:13px;
$font14:14px;
$font15:15px;
$font16:16px;
$font18:18px;
$font20:20px;

$heightMini:20px;
$heightMini2:25px;
$heightSmall:30px;
$height:35px;
$heightBig:40px;
$heightBigger:50px;




input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit*/
	color:$colorGray5;
}
input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color:$colorGray5;
}
input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
	color:$colorGray5;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* IE 10+ */
	color:$colorGray5;
}


/* 按钮 */
.ui-btn{
	border:none;min-width:40px;height:$height;background:$mainColor;color:$colorWhite;font-size:$font16;@include transition;border-radius:4px;padding:0 8px;box-sizing:border-box;outline:none;cursor:pointer;line-height: 100%;vertical-align:middle;position:relative;
}
.ui-btn:hover{background-color:darken($mainColor,10%);box-shadow:0 0 5px 0 rgba(0,0,0,0.2)}

.ui-btn.border{background:$colorWhite;border:solid 1px $colorGray4;color:$mainColor2;}
.ui-btn.border:hover{background-color:darken($colorWhite,5%);box-shadow:0 0 5px 0 rgba(0,0,0,0.2)}

.ui-btn.bigger{height:$heightBigger;font-size:$font18;padding:0 15px;}
.ui-btn.big{height:$heightBig;font-size:$font16;padding:0 12px;}
.ui-btn.small{height:$heightSmall;font-size:$font14;}
.ui-btn.mini{height:$heightMini;font-size:$font12;}
.ui-btn.disabled{background:$colorGray !important; color:$colorGray2 !important;}



/*分页*/
.ui-paging{
	text-align:center;
	.ui-paging-item{display: inline-block;border:solid 1px #e4e4e4; width:36px; height: 36px; line-height:36px;color:#666;text-align: center; margin:0 2px;background:#fff;}
	.ui-paging-selected{color:$mainColor !important;}
	.ui-paging-btn{color:#666;padding:0 10px;}
	.ui-paging-item:hover,.ui-paging-btn:hover{color:$mainColor;}
	.ui-paging-prev,.ui-paging-next{width:72px !important;}
}


/* 自定义对话框 */
.ui-dialog{
	position:fixed; left:0; top:0; visibility:hidden;z-index:998;width:100%;height: 100%;opacity:0;@include transition;
	.ui-dialog-content{width:700px; min-height:100px;background: #FFFFFF;box-shadow: 0px 5px 8.46px 0.54px rgba(131, 131, 131, 0.7);border-radius: 2px;border:solid 1px #ccc; position: absolute; left: 0; top: 0; z-index: 2;}
	.ui-dialog-title{padding:5px 10px; position:relative;cursor:default; background: $mainColor;}
	.ui-dialog-title .t{font-size: 18px;color: $colorWhite; text-align: center; font-weight: bold; }
	.ui-dialog-bottom{padding:15px;text-align: center;}
	.ui-dialog-content2{padding: 15px; overflow: auto;font-size:$font16;border-bottom:1px solid $colorGray4;max-height:500px;background:#ccc;}
	.ui-dialog-bg{position:absolute; z-index: 1; width: 100%; height: 100%; background:#fff; opacity: 0.5; filter: alpha(opacity=50); left: 0; top:0;}
	.ui-dialog-btn{min-width:90px;margin:0 5px;}
	.ui-dialog-close{position:absolute;right:10px;font-size:20px;width:20px;height:20px;cursor: pointer;top: 7px; transform:rotate(0);@include transition;color:$colorWhite;line-height: 20px;}
	.ui-dialog-close:hover{transform:rotate(90deg);}
}
.ui-dialog.show{opacity:1;visibility:visible;}


/* 提示框 */
.ui-alert{
	position:fixed; left:0; top:0; visibility:hidden;z-index:998;width:100%;height: 100%;opacity:0;@include transition;
	.ui-alert-content{width:400px; min-height:100px;background: #FFFFFF;box-shadow: 0px 5px 8.46px 0.54px rgba(131, 131, 131, 0.7);border-radius: 2px;border:solid 1px #ccc; position: absolute; left: 0; top: 0; z-index: 2;}
	.ui-alert-title{padding:5px 10px; position:relative;cursor:default; background: $mainColor;}
	.ui-alert-title .t{font-size: 18px;color: $colorWhite; text-align: center; font-weight: bold; }
	.ui-alert-bottom{padding:15px;text-align: center;}
	.ui-alert-content2{padding: 20px 20px 0 20px; overflow: auto;font-size:$font16;}
	.ui-alert-bg{position:absolute; z-index: 1; width: 100%; height: 100%; background:#fff; opacity: 0.5; filter: alpha(opacity=50); left: 0; top:0;}
	.ui-alert-btn{min-width:90px;margin:0 5px;}
	.ui-alert-close{position:absolute;right:10px;font-size:20px;width:20px;height:20px;cursor: pointer;top: 7px; transform:rotate(0);@include transition;color:$colorWhite;line-height: 20px;}
	.ui-alert-close:hover{transform:rotate(90deg);}
}
.ui-alert.show{opacity:1;visibility:visible;}



/* 复选项 */
.ui-checkbox{
	vertical-align:middle;display: inline-block; position:relative;color:$mainColor2;
	.ui-checkbox-block{
		width:16px; height:16px; overflow:hidden; box-sizing: border-box;border:solid 1px #d7d7d7;background:#fff; position: relative; display: inline-block; text-align: center;vertical-align:middle;margin-right:4px;border-radius:3px;
	}
	.ui-checkbox-selected{width:80%;height:80%;position: absolute;top:50%;left:50%; transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%); background:$mainColor;opacity:0;@include transition;}
	.ui-sys-checkbox{position:absolute;opacity:0.01;}
}
.ui-checkbox.on{
	.ui-checkbox-block{border-color:$mainColor;}
	.ui-checkbox-selected{opacity:1;}
}


.ui-checkbox-switch{width:100px;height:30px; box-sizing: border-box; color: #fff; background:$colorGray; border-radius: 20px; text-align: right;transition:all 0.2s linear;-webkit-transition:all 0.2s linear; font-size:$font16; font-weight: bold; line-height: 30px; position: relative; display: inline-block;vertical-align:middle;

	//.ui-checkbox-bg{width:50%; text-align: center; display:inline-block; height: 100%; position:absolute;right:0}
	.ui-checkbox-float{width:70%; height: 100%; position: absolute; cursor: pointer; background:#fff; left:0; top: 0;border-radius:15px; box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);color:#444;text-align: center;@include transition;}
	.ui-sys-checkbox{position:absolute;opacity:0.01;}
}
.ui-checkbox-switch.on{
	background:$mainColor;
	.ui-checkbox-float{left:30%;}
}
.ui-checkbox-switch.disabled .ui-checkbox-float{color:$colorGray3 !important;}




/* 日历 */
.ui-date{
   display:inline-block;background:$colorWhite;min-width:245px;box-sizing:border-box;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1);border:solid 1px #d7d7d7;position:absolute;padding:5px;@include transition;
    .ui-date-selectym{position:absolute;width:100%;height:100%;background:lighten($mainColor,30%);top:0;left:0;z-index:1;text-align:center;visibility:hidden;opacity:0; @include transition;}
    .ui-date-selectym.on{opacity:0.95;visibility:visible;}

	.ui-date-table{
		 width:100%;text-align:center; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
	}
    .ui-date-month{height:40px;text-align:center;position:relative;}
    .ui-date-week{height:30px;}
    .ui-date-prev{left:0;}
    .ui-date-next{right:0;}
    .ui-date-day{font-size:12px;height:20px;cursor:default;line-height: 20px;}
    .ui-date-td{height:35px;border-radius:2px;}
    .ui-date-td.on,.ui-date-td.on.on2{background-color:lighten($mainColor,20%) !important;cursor:pointer;}
    .ui-date-td.empty{background-color:$colorWhite !important;cursor:default !important;}
    .ui-date-td.on2{background-color:lighten($mainColor,32%) !important;cursor:pointer;}
    .ui-date-td:hover{background:$colorGray4;}
    .ui-date-btn{font-size:18px; color:$mainColor; padding:0 5px; cursor:pointer;position:absolute;}
	.ui-date-h1{text-align:center;font-size:$font16;font-weight:bold;color:#333;margin:40px 0 15px 0;}
	.ui-date-btn-hr{margin-top:15px;width:80px;}
	.ui-date-center{cursor:pointer;}
	.ui-date-data{font-size:$font12;color:$mainColor;margin:0 0 5px 0;}
	.ui-date-time{min-width:58px;width:58px;}
}


/* 输入框 */
.ui-input{
	min-width:40px;height:$height;display:inline-block;vertical-align:middle;border:solid 1px $colorGray;@include transition;border-radius:4px;background:$colorWhite;line-height: 100%; box-sizing:border-box;position:relative;
	.ui-input-text{width:100%;height:100%;box-sizing:border-box;border-radius:4px;color:$mainColor2;font-size:$font16;border:none;padding:0 8px;outline:none;}
	.ui-input-icon{
		position:absolute;right:5px;top:50%; margin-top:-14px;width: 30px;height: 30px;background:$colorWhite no-repeat center center;cursor:pointer;border-radius:4px;font-size:20px;text-align:center;line-height: 30px;
	}
}



.ui-input:hover{border-color:lighten($mainColor,10%);box-shadow:0 0 3px 0 rgba(0,0,0,0.2)}
.ui-input.disabled{border-color:$colorGray !important;}

.ui-input.bigger{
	height:$heightBigger;
	.ui-input-text{font-size:$font18;}
}
.ui-input.big{
	height:$heightBig;
	.ui-input-text{font-size:$font16;}
}
.ui-input.small{
	height:$heightSmall;
	.ui-input-text{font-size:$font14;}
	.ui-input-icon{font-size:$font16;height:24px;}
}
.ui-input.mini{
	height:$heightMini;
	.ui-input-text{font-size:$font12;padding-right:22px;}
	.ui-input-icon{width:22px !important;font-size:$font14;height:18px;margin-top:-9px;line-height:18px;}
}
.ui-input-date{visibility:hidden;opacity:0;margin-top:-5px}
.ui-input-date.show{visibility:visible;opacity:1;margin-top:0;}




/* 数字输入框 */
.ui-inputnum{
	width:150px;height:$height;display:inline-block;vertical-align:middle;border:solid 1px $colorGray;@include transition;border-radius:4px;background:$colorWhite;line-height: 100%; box-sizing:border-box;position:relative;overflow:hidden;
	.ui-inputnum-text{width:100%;height:100%;box-sizing:border-box;color:$mainColor2;font-size:$font16;border:none;padding:0 5px;outline:none; }
	.ui-inputnum-icon{position:absolute;right:0;top:0;box-sizing:border-box;width: 36px;height: 100%;background:$colorWhite;cursor:pointer; border:none;border-left:solid 1px $colorGray; text-align:center;line-height: $height;font-weight:bold; color:$colorGray3;@include transition;outline:none;}
	.ui-inputnum-left{right:36px;}
	.ui-inputnum-right{right:0;}
	.ui-inputnum-icon:hover{color:$mainColor;}
}
.ui-inputnum:hover{border-color:lighten($mainColor,10%);}
.ui-inputnum.disabled{
	border-color:$colorGray !important;
}

.ui-inputnum.small{
	height:$heightMini2;width:80px;
	.ui-inputnum-text{font-size:$font12;}
	.ui-inputnum-icon{line-height:$heightMini2;width:24px;font-size:$font12;}
	.ui-inputnum-left{right:24px;}
}




/* 单选项 */
.ui-radio-group{display:inline-block;}
.ui-radio{
	vertical-align:middle;display: inline-block; position:relative;
	.ui-radio-block{width:16px; height: 16px; box-sizing: border-box;border:solid 1px #d7d7d7;background:#fff; border-radius:50%; position: relative; display:inline-block;margin-right:4px;@include transition;vertical-align:middle;}
	.ui-radio-selected{width:8px;height:8px;position: absolute;top:50%;left:50%; transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%); background:$mainColor;opacity:0;border-radius:50%;@include transition;}
	.ui-sys-radio{position:absolute;opacity:0.01;}
}
.ui-radio.on{
	.ui-radio-block{border-color:$mainColor;}
	.ui-radio-selected{opacity:1;}
}


/* 下拉框 */
.ui-select{
	list-style: none;background:#fff;min-width:70px; width:100px;border:none; position:relative;z-index:10;display:inline-block;vertical-align:middle;padding:0;
	.ui-select-head{color:$colorGray2; border-radius: 2px; cursor: default;box-sizing:border-box;height:$height;line-height: $height;border:solid 1px $borderColor;position:relative;list-style: none;padding:0 25px 0 0;font-size:$font14;overflow:hidden;position:relative;line-height: 100%;}
	.ui-select-selected{width:100%;height:100%;border:none;outline:none;position:absolute;top:0;left:0;padding-left:8px;}
	.ui-select-icon{width:0;height:0;position:absolute;right:10px; top:50%; margin-top:-3px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid $mainColor;}
	.ui-select-list{max-height:$height*5;overflow:auto;position:absolute;list-style:none;width:100%;border-bottom:solid 1px $borderColor;@include transition;opacity:0;margin-top:-5px; z-index:2;visibility:hidden; background:$colorWhite;text-align:left;}
	.ui-select-list.on{opacity:1;margin-top:0;visibility:visible;}
	.ui-select-option{height:$height;display:block;height:100%;box-sizing:border-box;border:1px solid $borderColor;color:$colorGray2; text-decoration:none;line-height:$height;padding-left:8px;border-top:none;font-size:$font14;}
	.ui-select-option{overflow:hidden;white-space: nowrap;text-overflow:  ellipsis;}
	.ui-select-option:hover{background:#eee;cursor:pointer;}
	.ui-select-option.selected{background:$mainColor;color:$colorWhite;}
	.ui-select-option:last-child{border-bottom:none;}
}
.ui-select.bigger .ui-select-head{height:$heightBigger;font-size:$font18;}
.ui-select.big .ui-select-head{height:$heightBig;font-size:$font16;}
.ui-select.small .ui-select-head{height:$heightSmall;font-size:$font14;}
.ui-select.mini .ui-select-head{height:$heightMini;font-size:$font12;}



/* 联动 */
.ui-cascader{
	min-width:40px;height:$height;display:inline-block;vertical-align:middle;border:solid 1px $colorGray;@include transition;border-radius:4px;background:$colorWhite;line-height: 100%; box-sizing:border-box;position:relative;
	.ui-cascader-text{line-height:100%;width:100%;height:100%;min-width:150px;box-sizing:border-box;color:$mainColor2;font-size:$font14;padding:0 8px;line-height: $height;cursor:default;overflow:hidden;}
	.ui-cascader-block{position:absolute;width:500px;}
	.ui-cascader-list{width:160px;background:$colorWhite;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.2);border:solid 1px $colorGray; float:left;max-height:300px; overflow:auto;}
	.ui-cascader-item{display:block;height:$heightSmall;line-height:$heightSmall;color:$mainColor2;
		padding:0 10px;overflow:hidden;overflow:hidden;white-space: nowrap;text-overflow:  ellipsis;position:relative;}
	.ui-cascader-item.on{background:$mainColor !important;color:$colorWhite !important;}
	.ui-cascader-item:hover{background:lighten($mainColor,30%);}
	.ui-cscader-hr{font-size:14px;color:lighten($mainColor2,60%);margin:0 3px;}
	.ui-cascader-icon{position:absolute;right:10px;font-size:$font12;color:$colorGray5;}
}

.ui-cascader.bigger{
	height:$heightBigger;
	.ui-cascader-text{font-size:$font18;}
}
.ui-cascader.big{
	height:$heightBig;
	.ui-cascader-text{font-size:$font16;}
}
.ui-cascader.small{height:$heightSmall;
	.ui-cascader-text{font-size:$font14;}
}
.ui-cascader.mini{
	height:$heightMini;
	.ui-cascader-text{font-size:$font12;padding-right:22px;}
}


/* 上传文件 */
.ui-upfile{
	display:inline-block;position:relative;
	.ui-upfile-error{color:$colorError;font-size:$font14;}
	.ui-upfile-name{color:$mainColor2;font-size:$font14;margin-left:10px;position:relative;max-width:200px;display:inline-block;@include textellipsis;height:$height;line-height:$height; vertical-align: middle;}
	.ui-upfile-file{position:absolute;width: 100%;height: 100%;opacity:0.01;left:0;top:0;z-index:3;}
	.ui-upfile-img{width:100px;height:100px;position:relative;background:$colorWhite;border:solid 1px $colorGray5;overflow:hidden;}
	.ui-upfile-bg{width:40px;height:40px;line-height: 40px;font-size:30px; position:absolute;left:50%;top:50%; text-align:center; font-weight:bold;margin:-20px 0 0 -20px;color:$colorGray5; z-index:1;}
	.ui-upfile-img-block{width:100%;height:100%;position:relative;z-index:2;}
	.ui-upfile-del{position: absolute; right: 5px; top: 5px; z-index: 12; width:20px;height:20px; background:#fff; color: #666; text-align: center; line-height: 20px; border-radius: 50%; font-size: 12px; cursor: pointer;opacity:0; @include transition;box-shadow: 0 0 2px 0 #999;}
    .ui-upfile-del2{display:inline-block;width:20px;height:20px;cursor: pointer;font-size:14px; margin:2px 0 0 5px;vertical-align:middle;}
    .ui-upfile-tip{position:absolute;width: 100%;height: 100%;background:$colorWhite;opacity:0;visibility:hidden;text-align: center;line-height: 100px;}
    .ui-upfile-tip.on{opacity:1;visibility:visible; z-index: 4;}

}
.ui-upfile:hover{
	.ui-upfile-del{opacity:1;}
}
.ui-upfile.new{
  .ui-upfile-del{display:none;}
}

.ui-upfile-group{
	.ui-upfile{margin-right: 5px;}
}


/* 评分 */
.ui-grade{
	display:inline-block;position:relative;height: 32px;vertical-align:middle;overflow:hidden;
	.ui-grade-star{width: 30px;height: 30px;text-align:center;line-height: 32px;color:$colorGray5;display:inline-block;font-size:22px; @include transition;cursor:default;overflow:hidden;vertical-align:top;}
	.ui-grade-star:hover{color:$mainColor;font-size:25px !important;}
	.ui-grade-star.on{color:$mainColor;font-size:20px;}
	.ui-grade-point{line-height:36px;display:inline-block;height:32px;line-height:32px;vertical-align:top;}
}



/* 表单 */
.ui-form-item{
	margin-bottom:25px;position:relative;z-index:1;
	.ui-form-item-left{width:85px;display:inline-block; position:absolute; left:0;top:0;text-align:right;line-height: 35px;}
	.ui-form-item-left.sign:before{content:"*";color:#ff5400; margin-right:3px;}
	.ui-form-item-left:after{content:"：";margin-right:3px;}
	.ui-form-item-left-empty:after{content:""!important;}
	.ui-form-item-right{width:100%;display:inline-block;position:relative;box-sizing:border-box;padding-left:85px;}
	.ui-form-error{position:absolute;bottom:-20px;color:#ff5400;font-size:14px;}
}


/*走马灯*/
.ui-carousel{
	width:100%;min-height:200px;position: relative; z-index:0;
	.ui-carousel-a{width:100%;height: 100%;opacity:0;transform:translateZ(0);transition: all 0.5s linear;position:absolute;z-index:1;background:center center no-repeat;}
	.ui-carousel-a.on{opacity:1;}
	.u-carousel-icon{width:40px;height:40px;position:absolute;background:rgba(0,0,0,0.5);color:$colorWhite; z-index:2;border-radius:20px;text-align: center;line-height: 40px;top:50%;margin-top: -20px;cursor: pointer;opacity:0;transform:translateZ(0);transition: all 0.4s ease;font-size:20px;}
	.u-carousel-icon2{background:none;text-shadow:0 0 3px rgba(0,0,0,0.5);font-size:60px;line-height: 60px;margin-top: -30px;width:60px;height:60px;}
	.u-carousel-left{left:0;}
	.u-carousel-right{right:0;}
	.u-carousel-text{position:absolute;width:100%;height:30px; box-sizing:border-box; padding:0 10px; overflow:hidden;line-height: 30px; z-index:3;bottom:0;left:0;background:rgba(0,0,0,0.4);color:$colorWhite;}
}

.ui-carousel:hover{
	.u-carousel-icon{opacity:1;}
	.u-carousel-left{left:20px;}
	.u-carousel-right{right:20px;}
}




/*图片展示*/
.ui-imgshow{
	width:400px;height:300px;position: relative;
	.ui-imgshow-img-block{width:100%;height:calc(100% - 65px);margin-bottom: 5px;box-sizing: border-box;position: relative;}
	.ui-imgshow-img-block:hover{
		.ui-imgshow-drag{opacity:1}

	}
	.ui-imgshow-img{width:100%;height: 100%;}
	.ui-imgshow-list{height:60px;width:100%;overflow:hidden;}
	.ui-imgshow-smallimg{position:relative;height:60px;width:60px;opacity: 0.6;transition: all 0.2s ease;margin-right:5px;top:0;vertical-align:top;}
	.ui-imgshow-smallimg:hover{top:-3px;}
	.ui-imgshow-smallimg.on{opacity:1}
	.ui-imgshow-bigimg-img{width:auto;height:auto;left:5px;}
	.ui-imgshow-scroll{position: relative;left:0;transition: left 0.2s ease;}
	.ui-imgshow-bigimg{width:100%;height:100%;position:absolute;left:100%;top:0;box-sizing:border-box;border:solid 1px #ddd;background: #000;overflow:hidden;transition: opacity 0.2s ease;display:none; margin-left:15px;}
	.ui-imgshow-drag{width:0;height:0;position:absolute;left:0;top:0;background:url() rgba(255,255,255,0.3);opacity:0.01;}
}


.ui-imgshow:hover{
	.ui-imgshow-bigimg.on{display:block;}
}
